"use client"

import React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { ArrowLeft, Save, User, Code, Trophy, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

const steps = [
  { id: 1, title: "个人信息", icon: User },
  { id: 2, title: "技能栈", icon: Code },
  { id: 3, title: "成就经历", icon: Trophy },
  { id: 4, title: "偏好设置", icon: Settings },
]

const skillCategories = {
  编程语言: ["Python", "JavaScript", "Java", "C++", "R", "Go", "Rust", "Swift"],
  机器学习: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras", "XGBoost", "LightGBM"],
  数据科学: ["Pandas", "NumPy", "Matplotlib", "Seaborn", "Jupyter", "SQL"],
  Web开发: ["React", "Vue", "Angular", "Node.js", "Django", "Flask", "Spring"],
  云平台: ["AWS", "Azure", "GCP", "Docker", "Kubernetes", "Terraform"],
  其他: ["Git", "Linux", "MongoDB", "PostgreSQL", "Redis", "Elasticsearch"],
}

export default function EditProfilePage() {
  const [currentStep, setCurrentStep] = useState(1)
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

  const [formData, setFormData] = useState({
    // 个人信息
    name: "Alex Chen",
    email: "alex.chen@example.com",
    school: "清华大学",
    major: "计算机科学与技术",
    year: "研究生二年级",
    location: "北京",
    bio: "热爱AI和数据科学的全栈开发者",

    // 技能栈
    skills: ["Python", "JavaScript", "TensorFlow", "React"],
    experience: "2-3年",

    // 成就经历
    achievements: [{ competition: "Kaggle House Prices", rank: "3rd Place", year: "2024" }],

    // 偏好设置
    preferredTeamSize: "3-4人",
    preferredRole: "技术负责人",
    timeZone: "Asia/Shanghai",
    notifications: {
      email: true,
      push: true,
      teamInvites: true,
      competitionUpdates: true,
    },
  })

  const handleInputChange = (field, value) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

  const handleSkillToggle = (skill) => {
    setFormData((prev) => ({
      ...prev,
      skills: prev.skills.includes(skill) ? prev.skills.filter((s) => s !== skill) : [...prev.skills, skill],
    }))
  }

  const handleSubmit = async () => {
    setIsLoading(true)

    // 模拟提交过程
    await new Promise((resolve) => setTimeout(resolve, 2000))

    setIsLoading(false)
    toast({
      title: "🎉 资料更新成功！",
      description: "已同步到星际档案",
    })

    // 延迟跳转
    setTimeout(() => {
      window.location.href = "/profile"
    }, 1000)
  }

  const nextStep = () => {
    if (currentStep < steps.length) {
      setCurrentStep(currentStep + 1)
    }
  }

  const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
    }
  }

  const progress = (currentStep / steps.length) * 100

  return (
    <div className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* 返回按钮 */}
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="mb-6">
          <Link href="/profile">
            <Button variant="ghost" size="sm" className="gap-2">
              <ArrowLeft className="w-4 h-4" />
              返回个人资料
            </Button>
          </Link>
        </motion.div>

        {/* 进度条 */}
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
          <Card className="glass border-0">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h1 className="text-2xl font-bold">编辑个人资料</h1>
                <span className="text-sm text-gray-400">
                  步骤 {currentStep} / {steps.length}
                </span>
              </div>

              <Progress value={progress} className="mb-4" />

              <div className="flex justify-between">
                {steps.map((step) => {
                  const Icon = step.icon
                  const isActive = currentStep === step.id
                  const isCompleted = currentStep > step.id

                  return (
                    <div
                      key={step.id}
                      className={`flex items-center gap-2 ${
                        isActive ? "text-blue-400" : isCompleted ? "text-green-400" : "text-gray-400"
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                      <span className="text-sm font-medium hidden sm:block">{step.title}</span>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* 表单内容 */}
        <motion.div
          key={currentStep}
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -20 }}
          transition={{ duration: 0.3 }}
        >
          <Card className="glass border-0">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                {React.createElement(steps[currentStep - 1].icon, { className: "w-5 h-5" })}
                {steps[currentStep - 1].title}
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6">
              {/* 步骤 1: 个人信息 */}
              {currentStep === 1 && (
                <div className="space-y-6">
                  <div className="flex items-center gap-6 mb-6">
                    <Avatar className="w-24 h-24">
                      <AvatarImage src="/default-avatar.svg" />
                      <AvatarFallback className="text-xl">{formData.name[0]}</AvatarFallback>
                    </Avatar>
                    <div>
                      <Button variant="outline" size="sm">
                        更换头像
                      </Button>
                      <p className="text-sm text-gray-400 mt-2">支持 JPG、PNG 格式，建议尺寸 200x200</p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="name">姓名</Label>
                      <Input
                        id="name"
                        value={formData.name}
                        onChange={(e) => handleInputChange("name", e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">邮箱</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                    <div>
                      <Label htmlFor="school">学校/公司</Label>
                      <Input
                        id="school"
                        value={formData.school}
                        onChange={(e) => handleInputChange("school", e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                    <div>
                      <Label htmlFor="major">专业/职位</Label>
                      <Input
                        id="major"
                        value={formData.major}
                        onChange={(e) => handleInputChange("major", e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                    <div>
                      <Label htmlFor="year">年级/工作年限</Label>
                      <Select value={formData.year} onValueChange={(value) => handleInputChange("year", value)}>
                        <SelectTrigger className="glass border-0">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="本科一年级">本科一年级</SelectItem>
                          <SelectItem value="本科二年级">本科二年级</SelectItem>
                          <SelectItem value="本科三年级">本科三年级</SelectItem>
                          <SelectItem value="本科四年级">本科四年级</SelectItem>
                          <SelectItem value="研究生一年级">研究生一年级</SelectItem>
                          <SelectItem value="研究生二年级">研究生二年级</SelectItem>
                          <SelectItem value="研究生三年级">研究生三年级</SelectItem>
                          <SelectItem value="1-2年工作经验">1-2年工作经验</SelectItem>
                          <SelectItem value="3-5年工作经验">3-5年工作经验</SelectItem>
                          <SelectItem value="5年以上工作经验">5年以上工作经验</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="location">所在地</Label>
                      <Input
                        id="location"
                        value={formData.location}
                        onChange={(e) => handleInputChange("location", e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="bio">个人简介</Label>
                    <Textarea
                      id="bio"
                      value={formData.bio}
                      onChange={(e) => handleInputChange("bio", e.target.value)}
                      placeholder="介绍一下你的背景、兴趣和目标..."
                      className="glass border-0 min-h-[100px]"
                    />
                  </div>
                </div>
              )}

              {/* 步骤 2: 技能栈 */}
              {currentStep === 2 && (
                <div className="space-y-6">
                  <div>
                    <Label>经验水平</Label>
                    <Select
                      value={formData.experience}
                      onValueChange={(value) => handleInputChange("experience", value)}
                    >
                      <SelectTrigger className="glass border-0">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="初学者">初学者 (0-1年)</SelectItem>
                        <SelectItem value="1-2年">有一定经验 (1-2年)</SelectItem>
                        <SelectItem value="2-3年">较有经验 (2-3年)</SelectItem>
                        <SelectItem value="3-5年">经验丰富 (3-5年)</SelectItem>
                        <SelectItem value="5年以上">专家级 (5年以上)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <Label className="text-base font-medium mb-4 block">
                      选择你的技能 ({formData.skills.length} 已选择)
                    </Label>

                    {Object.entries(skillCategories).map(([category, skills]) => (
                      <div key={category} className="mb-6">
                        <h4 className="font-medium text-sm text-gray-300 mb-3">{category}</h4>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                          {skills.map((skill) => (
                            <div
                              key={skill}
                              onClick={() => handleSkillToggle(skill)}
                              className={`p-3 rounded-lg border cursor-pointer transition-all ${
                                formData.skills.includes(skill)
                                  ? "bg-blue-500/20 border-blue-500/50 text-blue-400"
                                  : "bg-white/5 border-white/10 hover:border-white/20"
                              }`}
                            >
                              <div className="flex items-center gap-2">
                                <Checkbox
                                  checked={formData.skills.includes(skill)}
                                  readOnly
                                  className="pointer-events-none"
                                />
                                <span className="text-sm">{skill}</span>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
                    <h4 className="font-medium text-blue-400 mb-2">已选择的技能</h4>
                    <div className="flex flex-wrap gap-2">
                      {formData.skills.map((skill) => (
                        <Badge
                          key={skill}
                          variant="outline"
                          className="cursor-pointer hover:bg-red-500/20"
                          onClick={() => handleSkillToggle(skill)}
                        >
                          {skill} ×
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* 步骤 3: 成就经历 */}
              {currentStep === 3 && (
                <div className="space-y-6">
                  <div>
                    <Label className="text-base font-medium mb-4 block">竞赛经历</Label>
                    <div className="space-y-4">
                      {formData.achievements.map((achievement, index) => (
                        <div key={index} className="p-4 glass rounded-lg">
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <Input placeholder="竞赛名称" value={achievement.competition} className="glass border-0" />
                            <Input placeholder="获得名次" value={achievement.rank} className="glass border-0" />
                            <Input placeholder="年份" value={achievement.year} className="glass border-0" />
                          </div>
                        </div>
                      ))}
                      <Button variant="outline" className="w-full bg-transparent">
                        + 添加竞赛经历
                      </Button>
                    </div>
                  </div>

                  <div>
                    <Label className="text-base font-medium mb-4 block">项目经历</Label>
                    <Textarea placeholder="描述你参与过的重要项目..." className="glass border-0 min-h-[120px]" />
                  </div>

                  <div>
                    <Label className="text-base font-medium mb-4 block">获得证书</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <Input placeholder="证书名称" className="glass border-0" />
                      <Input placeholder="颁发机构" className="glass border-0" />
                    </div>
                    <Button variant="outline" className="w-full mt-2 bg-transparent">
                      + 添加证书
                    </Button>
                  </div>
                </div>
              )}

              {/* 步骤 4: 偏好设置 */}
              {currentStep === 4 && (
                <div className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label>偏好团队规模</Label>
                      <Select
                        value={formData.preferredTeamSize}
                        onValueChange={(value) => handleInputChange("preferredTeamSize", value)}
                      >
                        <SelectTrigger className="glass border-0">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="2人">2人小队</SelectItem>
                          <SelectItem value="3-4人">3-4人团队</SelectItem>
                          <SelectItem value="5-6人">5-6人大队</SelectItem>
                          <SelectItem value="不限">不限</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label>偏好角色</Label>
                      <Select
                        value={formData.preferredRole}
                        onValueChange={(value) => handleInputChange("preferredRole", value)}
                      >
                        <SelectTrigger className="glass border-0">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="技术负责人">技术负责人</SelectItem>
                          <SelectItem value="算法工程师">算法工程师</SelectItem>
                          <SelectItem value="前端开发">前端开发</SelectItem>
                          <SelectItem value="后端开发">后端开发</SelectItem>
                          <SelectItem value="数据分析师">数据分析师</SelectItem>
                          <SelectItem value="产品经理">产品经理</SelectItem>
                          <SelectItem value="UI/UX设计师">UI/UX设计师</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div>
                    <Label>时区</Label>
                    <Select value={formData.timeZone} onValueChange={(value) => handleInputChange("timeZone", value)}>
                      <SelectTrigger className="glass border-0">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Asia/Shanghai">北京时间 (UTC+8)</SelectItem>
                        <SelectItem value="America/New_York">纽约时间 (UTC-5)</SelectItem>
                        <SelectItem value="Europe/London">伦敦时间 (UTC+0)</SelectItem>
                        <SelectItem value="Asia/Tokyo">东京时间 (UTC+9)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <Label className="text-base font-medium mb-4 block">通知设置</Label>
                    <div className="space-y-4">
                      {[
                        { key: "email", label: "邮件通知", desc: "接收重要更新和邀请" },
                        { key: "push", label: "推送通知", desc: "浏览器推送提醒" },
                        { key: "teamInvites", label: "组队邀请", desc: "收到组队邀请时通知" },
                        { key: "competitionUpdates", label: "竞赛更新", desc: "关注的竞赛有更新时通知" },
                      ].map((item) => (
                        <div key={item.key} className="flex items-center justify-between p-4 glass rounded-lg">
                          <div>
                            <div className="font-medium">{item.label}</div>
                            <div className="text-sm text-gray-400">{item.desc}</div>
                          </div>
                          <Checkbox
                            checked={formData.notifications[item.key]}
                            onCheckedChange={(checked) =>
                              handleInputChange("notifications", {
                                ...formData.notifications,
                                [item.key]: checked,
                              })
                            }
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* 导航按钮 */}
              <div className="flex justify-between pt-6 border-t border-white/10">
                <Button variant="outline" onClick={prevStep} disabled={currentStep === 1}>
                  上一步
                </Button>

                {currentStep < steps.length ? (
                  <Button onClick={nextStep}>下一步</Button>
                ) : (
                  <Button
                    onClick={handleSubmit}
                    disabled={isLoading}
                    className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 gap-2"
                  >
                    {isLoading ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                        保存中...
                      </>
                    ) : (
                      <>
                        <Save className="w-4 h-4" />
                        保存资料
                      </>
                    )}
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
